<template>
  <!--头部-->
    <Header/>
  <!--end-->

    <div class="content clearfix">
        <!--排行榜-->
        <RankList/>
        <!--产品列表-->
        <ul class="preferred-select clearfix">
            <li v-for="(proItem,index) in productList" :key="proItem.id">
                <h3 class="preferred-select-title">
                    <span>{{ proItem.productName }}</span>
                    <img src="@/assets/image/1-bg1.jpg" alt="" v-if="index%4 == 1">
                    <img src="@/assets/image/1-bg2.jpg" alt="" v-else-if="index%4 == 2">
                    <img src="@/assets/image/1-bg3.jpg" alt="" v-else-if="index%4 == 3">
                    <img src="@/assets/image/1-bg4.jpg" alt="" v-else>
                </h3>
                <div class="preferred-select-number">
                    <p><b>{{ proItem.rate }}</b>%</p>
                    <span>历史年化收益率</span>
                </div>
                <div class="preferred-select-date">
                    <div>
                        <span>投资周期</span>
                        <p><b>{{ proItem.cycle }}</b>个月</p>
                    </div>
                    <div>
                        <span>余利可投资金额</span>
                        <p><b>{{ proItem.leftProductMoney }}.0</b>元</p>
                    </div>
                </div>
                <p class="preferred-select-txt">
                    优选计划项目，投资回报周期{{ proItem.cycle }}个月，起点低，适合短期资金周转、对流动性要求高的投资人。
                </p>
                <a href="javascript:void(0);" class="preferred-select-btn"
                   @click="goLink('/page/product/detail',{id: proItem.id})">立即投资</a>
            </li>

            <!--
            -->
        </ul>

        <!--分页-->
        <div class="page_box">
            <ul class="pagination">
                <li><a href="javascript:void(0)" @click="first">首页</a></li>
                <li><a href="javascript:void(0)" @click="pre">上一页</a></li>
                <li class="active"><span>{{ productPage.curPage }}</span></li>
                <li><a href="javascript:void(0)" @click="next">下一页</a></li>
                <li><a href="javascript:void(0)" @click="last">尾页</a></li>
                <li class="totalPages"><span>共{{ productPage.totalPage }}页</span></li>
            </ul>
        </div>

    </div>


  <!--公共底部-->
    <Footer/>

</template>

<script>
import Header from "@/views/common/Header.vue";
import Footer from "@/views/common/Footer.vue";
import {getProductListAndPageApi} from "@/api/product";
import {layxMessage} from "@/utils/layxUtil";
import RankList from "@/views/common/RankList.vue";

export default {
    name: "productList",
    // 只适用于组件间传递
    props: {},
    data() {
        return {
            pType: this.$route.query.pType,

            productList: [
                {
                    id: 0,
                    productName: "",
                    rate: 0.0,
                    cycle: 0,
                    releaseTime: 0,
                    productType: 0,
                    productNo: "",
                    productMoney: 0,
                    leftProductMoney: 0,
                    bidMinLimit: 0,
                    bidMaxLimit: 0,
                    productStatus: 0,
                    productFullTime: "",
                    productDesc: ""

                }
            ],
            productPage: {
                curPage: 1,
                pageSize: 0,
                totalPage: 0,
                totalRecord: 0
            }
        }
    },
    watch: {
        // 使用字符串方法监听路由
        '$route.query.pType': {
            handler(newVal, oldVal) {
                // 当 pType 变化时，会调用这个函数
                console.log('pType changed from', oldVal, 'to', newVal);
                // 在这里你可以执行任何对应的逻辑
                // this.pType = newVal
                this.initListAndPage(this.pType, 1, 9)
            },
            immediate: true // 如果你希望在组件创建时立即触发
        }
    },
    components: {RankList, Footer, Header},
    methods: {
        // getRouterQuery: () => {
        //     // 应该使用 this.$route.query 而不是 this.$router.query。
        //     // $router 是 Vue Router 的全局路由实例，而 $route 是当前激活的路由的信息对象，它包含了如 path、params、query 等路由信息。
        //     return this.$route.query.pType
        // },
        //     获取产品列表和分页信息


        // 获取分页和列表信息
        initListAndPage(productType, curPage, pageSize) {
            //获取产品列表数据
            getProductListAndPageApi(productType, curPage, pageSize).then(res => {
                this.productList = res.rows
                this.productPage = res.pageInfo
                //       由于已经在响应拦截器统一处理响应信息，以后就不用再处理了，简单打个错误信息到控制台意思一下就行
            }).catch(err => {
                console.error(err)
            })

        },
        first() {
            if (this.productPage.curPage == 1) {
                layxMessage.warning('已经是第一页数据.');
            } else {
                this.initListAndPage(this.pType, 1, 9)
            }
        },
        last() {
            console.log('this.page', this.page)
            if (this.productPage.curPage == this.productPage.totalPage) {
                layxMessage.warning('已经是最后一页数据.');
            } else {
                this.initListAndPage(this.pType, this.productPage.totalPage, 9)
            }
        },
        pre() {
            if (this.productPage.curPage <= 1) {
                layxMessage.warning('已经是第一页数据.');
            } else {
                this.initListAndPage(this.pType, this.productPage.curPage - 1, 9);
            }

        },
        next() {
            if (this.productPage.curPage >= this.productPage.totalPage) {
                layxMessage.warning('已经是最后一页数据.');
            } else {
                this.initListAndPage(this.pType, this.productPage.curPage + 1, 9);
            }

        },
        //  跳转到指定页页
        goLink(path, params) {
            // 由于props只适用于组件间数据传递，而调用该方法的是一个标签，而不是组件，所以必须使用路由来传参
            this.$router.push({
                path: path,
                query: params
            })


        }
    },
    mounted() {
        this.initListAndPage(this.pType, 1, 9)

    }
}
</script>

<style scoped>

</style>
